<template>
	<view>
		<view class="title"
			:style="'padding-top: '+ statusBarHeight +'rpx;height: '+ titleHeight +'rpx;line-height: '+ titleHeight +'rpx;background: '+ bg +';'">
			<image v-if="showHome" @click="HomeFn" class="home" src="https://cdn.spbcn.org/yanxuan/home.png"
				mode="aspectFit"></image>
			<image v-if="showBack" @click="goBack" class="home" src="https://cdn.spbcn.org/yanxuan/left.png"
				mode="aspectFit"></image>
			{{titleText}}
		</view>
		<view :style="'height: '+ (titleHeight+statusBarHeight) +'rpx;'"></view>
	</view>
</template>

<script>
	export default {
		name: "navbar",
		props: {
			titleText: {
				type: String
			},
			showHome: {
				type: Boolean
			},
			showBack: {
				type: Boolean
			},
			bg: {
				type: String
			}
		},
		data() {
			return {
				statusBarHeight: 0,
				titleHeight: 0,
			};
		},
		mounted() {
			this.getSystemStatus()
		},
		methods: {
			// 获取导航栏高度
			getSystemStatus() {
				let that = this;
				setTimeout(() => {
					uni.getSystemInfo({
						success: (res) => {
							console.log("res", res)
							that.statusBarHeight = res.statusBarHeight * 2
							if (res.platform === 'android' || res.platform === 'ios') {
								that.titleHeight = 64
							} else {
								uni.getMenuButtonBoundingClientRect().then((menu) => {
									console.log("menu", menu)
									that.titleHeight = (menu.bottom - menu.top) * 2
								});
							}
						}
					});
				})
			},
			HomeFn() {
				uni.switchTab({
					url: "/pages/tabbar/home/index"
				})
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="less">
	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: hzgb;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1000;
		padding-bottom: 20rpx;
		background-color: pink;
		// border-bottom: 2rpx solid rgba(0, 0, 0, 0.25);
	}

	.home {
		position: absolute;
		left: 42rpx;
		width: 40rpx;
		height: 40rpx;
	}
</style>